<div class="pm_modal small {{ctrl.class}}" role="dialog" style="display: block;">
    <form class="modal-dialog" ng-submit="ctrl.next()" novalidate name="setupOrganizationForm">
        <button type="button" ng-click="ctrl.cancel()" aria-hidden="true" title-translate="Close" title-translate-context="Action" class="fa fa-times close"></button>
        <div class="modal-content">
            <div class="modal-header">
                <h4 ng-if="ctrl.step === 'name'" class="modal-title" translate translate-context="Title">Setting up your Organization</h4>
                <h4 ng-if="ctrl.step === 'keys'" class="modal-title" translate translate-context="Title">Setting up your Keys</h4>
                <h4 ng-if="ctrl.step === 'password'" class="modal-title" translate translate-context="Title">Set Organization Password</h4>
                <h4 ng-if="ctrl.step === 'storage'" class="modal-title" translate translate-context="Title">Allocate Storage</h4>
                <h4 ng-if="ctrl.step === 'vpn'" class="modal-title" translate translate-context="Title">Allocate VPN Connections</h4>
            </div>
            <div class="modal-body pm_form">
                <div ng-if="ctrl.step === 'name'">
                    <p class="alert alert-info" translate-context="Info" translate>Pick a name for your Organization.</p>
                    <input
                        ng-model="ctrl.name"
                        type="text"
                        name="name"
                        placeholder-translate-context="Placeholder"
                        placeholder-translate="Organization name"
                        ng-maxlength="100"
                        required />
                    <div ng-messages="setupOrganizationForm.name.$error">
                        <p ng-message="required" class="text-red" translate-context="Error" translate>Field required</p>
                        <p ng-message="maxlength" class="text-red" translate-context="Error" translate>Name exceeds maximum length</p>
                    </div>
                </div>
                <div ng-if="ctrl.step === 'keys'">
                    <p class="alert alert-info" translate-context="Info" translate>This will create a new encryption key for your organization. 4096-bit keys only work on high performance computers, for most users, we recommend using 2048-bit keys.</p>
                    <div class="pm_grid">
                        <div class="col-1-2">
                            <label class="checkbox">
                                <custom-radio
                                    data-custom-ng-model="ctrl.size"
                                    data-custom-value="RSA2048"></custom-radio>
                                <strong translate translate-context="Title" translate-comment="form option heading">High security</strong> <small>(2048-bit)</small>
                            </label>
                        </div>
                        <div class="col-1-2">
                            <label class="checkbox">
                                <custom-radio
                                    data-custom-ng-model="ctrl.size"
                                    data-custom-value="RSA4096"
                                    data-custom-ng-disabled="ctrl.process === true"></custom-radio>
                                <strong translate translate-context="Title" translate-comment="form option heading">Highest security</strong> <small>(4096-bit)</small>
                            </label>
                        </div>
                    </div>
                </div>
                <div ng-if="ctrl.step === 'password'">
                    <p class="alert alert-info" translate-context="Info" translate>Your organization password can be shared with other users you wish to give administrative privileges. It is also an emergency recovery code to gain access to your organization in case you lose access to your account. Please save this password and keep it safe.</p>
                    <div class="margin">
                        <password
                            data-id="organizationPassword"
                            data-name="organizationPassword"
                            data-value="ctrl.organizationPassword"
                            data-form="setupOrganizationForm"
                            placeholder-translate-context="Placeholder"
                            placeholder-translate="Organization password"></password>
                    </div>
                    <div class="margin">
                        <password
                            data-id="confirmOrganizationPassword"
                            data-name="confirmOrganizationPassword"
                            data-value="ctrl.confirmOrganizationPassword"
                            data-form="setupOrganizationForm"
                            data-compare="ctrl.organizationPassword"
                            placeholder-translate-context="Placeholder"
                            placeholder-translate="Confirm organization password"></password>
                    </div>
                    <p class="alert alert-warning">
                        <span translate-context="Info" translate>* Do NOT forget this password. If you forget it, you will not be able to manage your organization.</span><br />
                        <span translate-context="Info" translate>* Save your password somewhere safe. Click on <i class="fa fa-eye"></i> icon to confirm you that have typed your password correctly.</span>
                    </p>
                </div>
                <div ng-if="ctrl.step === 'storage'">
                    <p class="alert alert-info" translate-context="Info" translate>Currently all available storage is allocated to the administrator account. Please reduce the admin account allocation to free up space for additional users. You can increase the total storage at any time by upgrading your account.</p>
                    <label>
                        <strong translate-context="Label" translate>Admin Account Storage:</strong> {{ ctrl.sliderValue * ctrl.unit | humanSize }} ({{ ctrl.userUsedSpace | humanSize }} Used)
                    </label>
                    <label class="margin">
                        <strong translate-context="Label" translate>Storage for members:</strong> {{ ( ctrl.max - ctrl.sliderValue * ctrl.unit) | humanSize }}
                    </label>
                    <slider value="ctrl.sliderValue" options="ctrl.sliderOptions" class="margin"></slider>
                    <legends list="ctrl.legends"></legends>
                </div>
                <div ng-if="ctrl.step === 'vpn'">
                    <p class="alert alert-info" translate-context="Info" translate>Currently all available VPN connections are allocated to the administrator account. Please select the number of connections you want to reserve for additional users.</p>
                    <label>
                        <strong translate-context="Label" translate>Admin VPN Connections:</strong> {{ ctrl.sliderVPNValue }}
                    </label>
                    <label class="margin">
                        <strong translate-context="Label" translate>VPN Connections for members:</strong> {{ ctrl.maxVPN - ctrl.sliderVPNValue  }}
                    </label>
                    <slider value="ctrl.sliderVPNValue" options="ctrl.sliderVPNOptions" class="margin"></slider>
                    <legends list="ctrl.legendsVPN"></legends>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="pm_button modal-footer-button disabled-if-network-activity" ng-click="ctrl.cancel()" translate translate-context="Action">Cancel</button>
            <button type="submit" class="pm_button primary modal-footer-button disabled-if-network-activity">
                <span ng-hide="ctrl.isLastStep()" translate translate-context="Action">Next</span>
                <span ng-show="ctrl.isLastStep()" translate translate-context="Action">Finish</span>
            </button>
        </div>
    </form>
    <div class="modal-overlay"></div>
</div>
